<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <div slot="header" class="clearfix">
        <span>权限管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showAdd(1, '0')">新增菜单权限</el-button>
      </div>
      <!-- 卡片的内容主体 -->
      <!-- 注意：如果要渲染树形表格，必须为 el-table 添加 row-key 属性 -->
      <el-table :data="treeData" border stripe row-key="id">
        <el-table-column label="权限名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="权限描述" prop="description"></el-table-column>
        <el-table-column label="权限级别" prop="type">
          <template v-slot="{ row }">
            <el-tag v-if="row.type === 1" size="small" effect="dark">菜单权限</el-tag>
            <el-tag v-if="row.type === 2" size="small" type="info" effect="dark">按钮权限</el-tag>
            <el-tag v-if="row.type === 3" size="small" type="info">API权限</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="权限状态" prop="enVisible">
          <template v-slot="{ row }">
            <el-tag v-if="row.enVisible === '1'" type="success" effect="dark" size="small">启用</el-tag>
            <el-tag v-if="row.enVisible === '0'" type="info" effect="dark" size="small">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div class="center-item">
              <!-- 如果 row.type 不等于 1，证明当前 row 对应的数据不是菜单权限，需要禁用掉添加的按钮 -->
              <el-tooltip effect="dark" content="按钮权限" placement="top" :disabled="row.type !== 1">
                <el-link type="primary" :disabled="row.type !== 1" @click="showAdd(2, row.id)">添加</el-link>
              </el-tooltip>
              <el-tooltip effect="dark" content="按钮权限" placement="top">
                <el-link type="primary" @click="ShowEdit(row.id)">编辑</el-link>
              </el-tooltip>
              <el-tooltip effect="dark" content="按钮权限" placement="top">
                <el-link type="primary" @click="remove(row.id)">删除</el-link>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddPer :show-dialog.sync="isShowAdd" :type.sync="type" :pid.sync="pid" @reload="initAllPerList"> </AddPer>
    <EditPer :id.sync="id" :show-dialog.sync="isShowEdit" @reload="initAllPerList"> </EditPer>
  </div>
</template>

<script>
// 按需导入 API
import EditPer from './components/EditPer.vue'
import AddPer from './components/AddPer.vue'
import { getAllPerAPI, removePerAPI } from '@/api/permission.js'
import { arr2Tree } from '@/utils'

export default {
  name: 'Permissions',
  components: {
    AddPer,
    EditPer
  },
  data() {
    return {
      // 树形结构的权限数据
      treeData: [],
      isShowAdd: false,
      type: '',
      pid: '',
      isShowEdit: false,
      id: ''
    }
  },
  created() {
    // 组件一创建，就自动调用方法，获取所有的权限列表数据
    this.initAllPerList()
  },
  methods: {
    // 获取系统中，所有权限的列表数据
    async initAllPerList() {
      const result = await getAllPerAPI()
      // 把数组转为树形结构的数据
      // 注意：第二个参数要传一个字符串的 '0'，因为所有菜单对应的 pid 都是 '0'
      this.treeData = arr2Tree(result.data, '0')
    },
    showAdd(type, pid) {
      // 如果 type 等于 1，表示菜单权限
      // 如果 type 等于 2，表示按钮权限
      this.type = type
      this.pid = pid
      this.isShowAdd = true
    },
    ShowEdit(id) {
      this.id = id
      this.isShowEdit = true
    },
    async remove(id) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') return
      await removePerAPI(id)
      this.$message.success('删除成功')
      this.initAllPerList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
